<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-07-13 16:54:15
 * @LastEditTime: 2023-07-18 23:31:56
 * @FilePath: \myblog\src\mviews\ArticleDetail.vue
-->
<template>
  <div class="blogm-article--wrap">
    <ArticleContent :article="article" v-if="article.content"/>
    <ArtcileCommnet ref="commentWrap" :comments="comments" :avatar="avatar"/>
  </div>
</template>

<script>
import {Notify} from 'vant'
import ArtcileCommnet from '@/mviews/ArticleComment.vue'
import ArticleContent from '@/mviews/components/ArticleContent.vue'
import { createNamespacedHelpers } from 'vuex'
const {mapGetters, mapActions} = createNamespacedHelpers('like');
export default {
  components:{
    ArticleContent,
    ArtcileCommnet
  },
  data(){
    return {
      id: '',
      article: {},
    }
  },
created(){
  this.id = this.$route.params.id
  this.getArticleById();
},
mounted(){
  this.$EventBus.$on('getArticleById', () => {
    this.getArticleById();
  })
  this.$EventBus.$on('focusComment', () => {
    this.focusComment();
  })
},
watch:{
},
computed:{
  comments() {
    return this.article?.comments
  },
  avatar() {
    return this.article?.author?.avatar
  }
},
methods:{
  ...mapActions(['pushLike', 'sendLikes']),
  focusComment() {
    this.$refs.commentWrap?.$refs.comment.scrollIntoView();
  },
  async getArticleById() {
    try{
      this.article = await this.$api({type: 'getArticleById', data: {id: this.id}});
      this.$EventBus.$emit('getCommentNum', this.article.comment_num);
      this.$EventBus.$emit('getLikes', this.article.like_num);
    }
    catch(err)
    {
      Notify.success({
      title: '获取失败',
      message: err.message
    })
    }
  }
},
beforeDestroy() {
  this.$EventBus.$off('getArticleById')
  this.$EventBus.$off('focusComment')
}
}
</script>
<style lang="scss" scoped>

</style>